<template>
  <div class="execution">
    <basic-container>
      <el-card class="operate-container" shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="addOther()"
          size="mini"
        >
          添加
        </el-button>
      </el-card>
      <div style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
        >
<!--          <el-table-column-->
<!--            label="店铺Id"-->
<!--            align="center"-->
<!--            prop="storeId"-->
<!--          ></el-table-column>-->
          <el-table-column
            label="收益名称"
            align="center"
            prop="name"
          ></el-table-column>
          <el-table-column
            label="收益百分比"
            align="center"
            prop="earn"
          ></el-table-column>
          <el-table-column
            label="操作人"
            align="center"
            prop="operationName"
          ></el-table-column>
          <el-table-column
            label="操作时间"
            align="center"
            prop="updateTime"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="handleUpdate(scope.$index, scope.row)"
                type="text"
                icon="el-icon-edit"
                >修改</el-button
              ></template></el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
        <el-form
          :label-position="labelPosition"
          :rules="rules"
          ref="formLabel"
          label-width="150px"
          :model="formLabel"
        >
          <el-form-item label="收益名称：" prop="name">
            <el-input
              style="width: 203px"
              v-model="formLabel.name"
              placeholder="收益名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="收益百分比：" prop="earn">
            <el-input
              style="width: 203px"
              type="number"
              v-model="formLabel.earn"
              placeholder="百分比"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleDetermine('formLabel')"
              type="primary"
              size="small"
            >
              确定
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import "@/styles/index.scss";
import {
  fetchList,
  createEarnType,
  updateEarnType,
} from "@/api/profit/other/index";

const defaultFormLaber = {
  earn: null,
  name: null,
  id: null,
};

export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
      },
      list: [],
      total: 0,
      formLabel: Object.assign({}, defaultFormLaber),
      rules: {
        earn: [{ required: true, message: "请填写总百分比", trigger: "blur" }],
        name: [{ required: true, message: "请输入收益名称", trigger: "blur" }],
      },
      title: "新增",
      labelPosition: "right",
      dialogVisible: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      fetchList(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    addOther() {
      this.title = "新增";
      this.dialogVisible = true;
    },
    handleUpdate(index, row) {
      this.title = "修改";
      this.dialogVisible = true;
      this.formLabel = Object.assign({}, row);
    },
    handleDetermine(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === "修改") {
            updateEarnType(this.formLabel).then((res) => {
              this.dialogVisible = false;
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.formLabel = Object.assign({}, defaultFormLaber);
                this.getList();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "danger",
                  duration: 1000,
                });
              }
            });
          } else {
            createEarnType(this.formLabel).then((res) => {
              this.dialogVisible = false;
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.formLabel = Object.assign({}, defaultFormLaber);
                this.getList();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "danger",
                  duration: 1000,
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
